<template>
  <div>
    <div
      class="container"
      :style="{
        minHeight: '100vh',
        alignItems: 'center',
        background:
          'url(http://codegen.caihongy.cn/20230922/735087380ee74ae5b7d67094b120ecee.jpg)',
        display: 'flex',
        width: '100%',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
        justifyContent: 'center',
      }"
    >
      <div>
        <div
          :style="{
            margin: '20px 0',
            color: '#fff',
            textAlign: 'center',
            width: '100%',
            letterSpacing: '2px',
            lineHeight: '44px',
            fontSize: '32px',
            fontWeight: '500',
          }"
        >
          传统文化推广平台登录
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          label-width="auto"
          class="rgs-form"
          :rules="rules"
        >
          <el-form-item prop="username" label="账号：">
            <el-input v-model="loginForm.username" placeholder="请输入账户" />
          </el-form-item>
          <el-form-item prop="password" label="密码：">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
            />
          </el-form-item>
          <el-form-item prop="captcha" label="验证码：">
            <el-input v-model="loginForm.captcha" placeholder="请输入验证码" />
            <el-image
              :src="`data:image/png;base64, ${imgCode}`"
              @click="getCode"
            ></el-image>
          </el-form-item>
          <el-button
            :style="{
              border: '0',
              cursor: 'pointer',
              padding: '0 24px',
              margin: '0 5px 0 80px',
              outline: 'none',
              color: '#fff',
              borderRadius: '4px',
              background: '#1abc9e',
              width: '300px',
              fontSize: '16px',
              height: '44px',
            }"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
          <el-button
            :style="{
              border: '0',
              cursor: 'pointer',
              padding: '0 24px',
              margin: '0 5px 0 80px',
              outline: 'none',
              color: '#666',
              borderRadius: '4px',
              textAlign: 'right',
              background: 'none',
              width: '300px',
              fontSize: '14px',
              height: '44px',
            }"
            @click="resetForm('loginForm')"
            >重置</el-button
          >
          <div>
            <router-link
              :style="{
                cursor: 'pointer',
                margin: '0 5px',
                fontSize: '14px',
                textDecoration: 'none',
                color: '#1abc9e',
                background: '#fff',
              }"
              :to="{
                path: '/register',
                query: { role: item.tableName, pageFlag: 'register' },
              }"
              v-if="item.hasFrontRegister == '是'"
              v-for="(item, index) in roles"
              :key="index"
              >注册{{ item.roleName.replace("注册", "") }}</router-link
            >
            <router-link
              :style="{
                cursor: 'pointer',
                margin: '0 5px',
                fontSize: '14px',
                textDecoration: 'none',
                color: '#1abc9e',
                background: '#fff',
              }"
              :to="{
                path: '/register',
                query: { role: item.tableName, pageFlag: 'retrieve' },
              }"
              v-if="item.hasFrontRegister == '是'"
              v-for="(item, index) in roles"
              :key="index"
              >忘记密码</router-link
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import menu from "@/config/menu";
export default {
  //数据集合
  data() {
    return {
      imgCode: "",
      baseUrl: this.$config.baseUrl,
      loginType: 1,
      roleMenus: [],
      loginForm: {
        username: "",
        password: "",
        tableName: "",
        code: "",
      },
      role: "",
      roles: [],
      rules: {
        username: [{ required: true, message: "请输入账户", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      codes: [
        {
          num: 1,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 2,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 3,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 4,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
      ],
      flag: false,
      verifyCheck2: false,
    };
  },
  components: {},
  created() {
    this.getCode();
    this.roleMenus = menu.list();
    for (let item in this.roleMenus) {
      if (this.roleMenus[item].hasFrontLogin == "是") {
        this.roles.push(this.roleMenus[item]);
      }
    }
  },
  //方法集合
  methods: {
    getCode() {
      this.$http({
        url: `merchant/code`,
        method: "GET",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.imgCode = data.imgContent;
        }
      });
    },
    randomString() {
      var len = 4;
      var chars = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
      ];
      var colors = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
      ];
      var sizes = ["14", "15", "16", "17", "18"];

      var output = [];
      for (var i = 0; i < len; i++) {
        // 随机验证码
        var key = Math.floor(Math.random() * chars.length);
        this.codes[i].num = chars[key];
        // 随机验证码颜色
        var code = "#";
        for (var j = 0; j < 6; j++) {
          var key = Math.floor(Math.random() * colors.length);
          code += colors[key];
        }
        this.codes[i].color = code;
        // 随机验证码方向
        var rotate = Math.floor(Math.random() * 45);
        var plus = Math.floor(Math.random() * 2);
        if (plus == 1) rotate = "-" + rotate;
        this.codes[i].rotate = "rotate(" + rotate + "deg)";
        // 随机验证码字体大小
        var size = Math.floor(Math.random() * sizes.length);
        this.codes[i].size = sizes[size] + "px";
      }
    },
    selectChange(e) {
      this.role = e;
    },
    submitForm(formName) {
      if (this.roles.length != 1) {
        if (!this.role) {
          this.$message.error("请选择登录用户类型");
          return false;
        }
      } else {
        this.role = this.roles[0].roleName;
        this.loginForm.tableName = this.roles[0].tableName;
      }

      this.loginPost(formName);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loginPost(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .get(`${this.loginForm.tableName}/login`, {
              params: this.loginForm,
            })
            .then((res) => {
              if (res.data.code === 0) {
                localStorage.setItem("frontToken", res.data.token);
                localStorage.setItem("UserTableName", this.loginForm.tableName);
                localStorage.setItem("username", this.loginForm.username);
                localStorage.setItem("adminName", this.loginForm.username);
                localStorage.setItem(
                  "frontSessionTable",
                  this.loginForm.tableName
                );
                localStorage.setItem("frontRole", this.role);
                localStorage.setItem("keyPath", 0);
                this.$router.push("/");
                this.$message({
                  message: "登录成功",
                  type: "success",
                  duration: 1500,
                });
              } else {
                this.getCode();
                this.$message.error(res.data.msg);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  position: relative;
  background: url(http://codegen.caihongy.cn/20230922/735087380ee74ae5b7d67094b120ecee.jpg);
  .rgs-form {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
	width: 500px;
  }
}
</style>
